import { Tab, Tabs,List,PullRefresh } from 'vant';
import { unknownProp } from 'vant/lib/utils';
import { defineComponent, h } from "vue"
import PLists from "../list/index"

const TabList = defineComponent({
    data(){
        return{

        }
    },
    props:{
        TabList:{
            type:Array,
            required:true
        },
        state:{
            type:Object,
            required:false
        },
        onchange:{
            type:Function,
            required:false
        },
        load:{
            type:Function,
            required:false
        },
        refresh:{
            type:Function,
            required:false
        },
        active:{
            type:unknownProp,
            required:true
        }
    },
    emits:['update:tab',"onchange","update:active"],
    setup(props, { attrs, slots,emit }){
        let TabList = props.TabList
        if(!TabList && TabList.length < 1){
            console.warn("please enter TabList")
            return null
        }
        const childrenTabs = () =>{
          const Liss =  TabList.map((item,index)=>{
                    return h(
                        Tab,
                        {
                            title:item.title,
                        },
                        {
                            default:()=> h(
                                    PLists,
                                    {
                                        load:props.load,
                                        Listarrts:item,
                                        refresh:props.refresh,
                                        'onUpdate:Listarrts':($event)=>emit('update:tab',$event)
                                    },
                                    {
                                        lists:()=>slots['default' + index]({list:item.list}),
                                    }
                                )
                            // default:()=> h(
                            //         'div',
                            //         {
                            //         },
                            //         "121212"
                            //     )
                        }
                    )
            })
            return Liss
        }
        return () => h(
            Tabs,
            {
                swipeable:false,
                sticky:true,
                color:"#3D39D8",
                active:props.active,
                "onUpdate:active":($event)=>emit("update:active",$event),
                onChange:(title,name)=>{
                    emit('onchange',title,name)
                }
            },
            {
                default:()=>h(
                    'div',
                    {},
                    [   
                        slots.title?slots.title():null,
                        childrenTabs()
                    ]
                )
            }
        )
    }
})

export default TabList